<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户订单</title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/theme-chalk/index.min.css"/>
    <script src="https://cdn.jsdelivr.net/npm/jquery@2.2.4/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.7.14/dist/vue.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.13/lib/index.min.js"></script>
    <script th:src="@{/static/main.js}"></script>

    <style>
        /*.el-row{*/
        /*    border: 1px solid red;*/
        /*}*/
        /*.el-col{*/
        /*    border: 1px solid yellow;*/
        /*}*/

        ::-webkit-scrollbar {
            /*滚动条隐藏*/
            display: none;
        }

        .orderPanel {
            /*panel边框颜色*/
            border-color: #458b74;
            border: 1px solid #458b74;
            box-shadow: 5px 5px 3px 0 #CCCCCC;
            margin-top: 30px;
            border-radius: 5px;
            padding-bottom: 10px;
        }

        .orderheading {
            /*自定义panel颜色*/
            background-color: #458b74ee;
            height: 40px;
            line-height: 40px;
            padding: 5px 10px;
            overflow:auto;
            border-radius: 5px 5px 0 0;
        }

        .orderheading > span {
            color: #dff0d8;
        }
        .orderheading > button, .orderheading > div {
            float: right;
        }

        td, th {
            /*如果单元格内容过长,隐藏,显示...*/
            overflow: hidden;
            white-space: pre-line;
            text-overflow: ellipsis;
        }

        .storeImg{
            height: 60px;
            width: 60px;
            float: left;
            border-radius: 50%;
            border: 2px solid #458b74;
            box-sizing: border-box;"
        }

        .cursorPointer{
            cursor: pointer;
        }

        .storeBlock {
            height: 60px;
            background-color: #dff0d8;
            transition: background-color 0.5s;
        }

        .storeBlock:hover {
            background-color: #afe1b8;
        }

        .storeBlock2 {
            height: 60px;
            width: 100%;
            float: left;
            border-radius: 30px 0 0 30px;
            background: linear-gradient(to right, #458b74, #dff0d8, #fff);
        }

        .cursorStyle-def {
            /*未支付/已取消, 光标:默认*/
            /*放在下方,可以覆盖storeBlock的优先级*/
            cursor: default;
        }

        #reviewMain el-row{
            padding: 5px;
            margin:5px;
        }
    </style>
</head>
<body>

<!--order:0未⽀付 1已支付 2已取消-->
<!--item:0未⽀付 1已支付 2已取消 3退款中 4已退款 5已签收 6已评论-->

<el-container id="app">
    <el-header>
        <el-row>
            <el-col :span="20" :offset="2" style="text-align: center;font-size: 30px;">
                    <h1><b style="font-family: 仿宋">我的订单</b></h1>
            </el-col>
        </el-row>
    </el-header>

    <el-main v-if="orderList.length<=0">
        <el-empty description="还没有任何订单,快去购买吧~"></el-empty>
    </el-main>

    <!-- 页面主体 -->
    <el-main v-if="orderList.length>0">
        <el-row>
            <el-col :span="20" :offset="2">
                <!--一个订单-->
                <div v-for="order in orderList" class="orderPanel" >
                    <!--订单头部-->
                    <div class="orderheading" >
                        <span>序号:&nbsp;{{order.id}}&nbsp;&nbsp;&nbsp;&nbsp;订单编号:&nbsp;{{order.orderNum}}&nbsp;&nbsp;&nbsp;&nbsp;下单时间:&nbsp;{{order.orderTime}}&nbsp;&nbsp;&nbsp;&nbsp;总金额:&nbsp;{{order.totalPrice}}&nbsp;元</span>
                        <!--order状态(0未⽀付,取消(按钮) 1已支付 2已取消(手动,自动)-->
                        <el-button type="warning" plain v-if="order.status == 0" @click="updateOrderStatus(order.id,2)">取消订单</el-button>
                        <div v-if="order.status == 0">&nbsp;&nbsp;</div>
                        <el-button type="primary" plain v-if="order.status == 0" @click="updateOrderStatus(order.id,1)">支付订单</el-button>
                        <el-button type="info" plain v-if="order.status == 2" class="cursorStyle-def">已取消</el-button>
                    </div>

                    <!--订单主体-->
                    <div v-for="orderItem in order.orderItemList">
                        <div>
                            <!-- 商铺信息,按钮 -->
                            <div>
                                <div class="storeBlock cursorPointer" @click="toStoreMenu(orderItem.storeId)" style="width: 80%;float: left;border-radius: 30px 0 0 30px;">
                                    <img class="storeImg" v-if="!orderItem.storeImg" src="/static/109951166155909486.jpg">
                                    <img class="storeImg" v-if="orderItem.storeImg" :src="orderItem.storeImg">
                                    <div style="line-height: 60px;" v-text="orderItem.storeName"></div>
                                </div>
                                <div class=" storeBlock" style="line-height: 60px;width: 20%;float: right;padding-left:7px;box-sizing: border-box;">
                                    <!--orderItem状态(0未⽀付 1已支付,退单(按钮),签收(按钮) 2已取消 3退款中 4已退款 5已签收,评论(按钮) 6已评论)[3按钮,7状态]-->
                                    <span v-if="orderItem.status == 0">未支付</span>
                                    <!--通过order和storeId确定退款项-->
                                    <el-button type="warning" plain v-if="orderItem.status == 1" @click="clearRefundTextarea(orderItem,order.id)">退款</el-button>
                                    <el-button type="primary" plain v-if="orderItem.status == 1" @click="receiving(order.id,orderItem.storeId,5)">签收</el-button>
                                    <span v-if="orderItem.status == 2">已取消</span>
                                    <el-button type="primary" plain disabled v-if="orderItem.status == 3" >退款中...</el-button>
                                    <span v-if="orderItem.status == 4">已退款</span>
                                    <span v-if="orderItem.status == 5">已签收</span>
                                    <span v-if="orderItem.status == 5">&nbsp;&nbsp;&nbsp;&nbsp;</span>
                                    <el-button type="primary" plain v-if="orderItem.status == 5" @click="clearReviewsTextarea(orderItem,order.id)">评论</el-button>
                                    <span v-if="orderItem.status == 6">已评论</span>
                                </div>
                            </div>

                            <!-- 数据显示 -->
                            <el-table
                                    :data="orderItem.itemVoList"
                                    stripe
                                    style="width: 100%">
                                <el-table-column
                                        label="图片"
                                        min-width="20%">
                                    <template slot-scope="scope">
                                        <img v-if="!scope.row.productImg" src="/static/109951166155909486.jpg"
                                             width="60" height="60"/>
                                        <img v-if="scope.row.productImg" :src="scope.row.productImg"
                                             width="60" height="60"/>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="productName"
                                        label="名称"
                                        min-width="20%">
                                </el-table-column>
                                <el-table-column
                                        prop="buyCount"
                                        label="购买数量"
                                        min-width="20%">
                                </el-table-column>
                                <el-table-column
                                        prop="sumPrice"
                                        label="金额"
                                        min-width="20%">
                                </el-table-column>
                                <el-table-column
                                        prop="status"
                                        label="状态"
                                        min-width="20%">
                                    <template scope="scope">
                                        <p v-if="scope.row.status=='0'">未支付</p>
                                        <p v-if="scope.row.status=='1'">已支付</p>
                                        <p v-if="scope.row.status=='2'">已取消</p>
                                        <p v-if="scope.row.status=='3'">退款中</p>
                                        <p v-if="scope.row.status=='4'">已退款</p>
                                        <p v-if="scope.row.status=='5'">已签收</p>
                                        <p v-if="scope.row.status=='6'">已评论</p>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </div>
                    </div>

                </div>



                <!-- dialog 退款会话框 一个页面只有一个会话框-->
                <el-dialog
                        title="退款理由"
                        :visible.sync="refundDialog"
                        width="50%">

                    <div>
                        <div class="storeBlock2">
                            <img class="storeImg" :src="refundData.storeImg">
                            <div style="line-height: 60px;" v-text="refundData.storeName"></div>
                        </div>
                        <el-table
                                :data="refundData.itemVoList"
                                stripe
                                style="width: 100%">
                            <el-table-column
                                    label="图片"
                                    min-width="20%">
                                <template slot-scope="scope">
                                    <img :src="scope.row.productImg"
                                         width="60" height="60"/>
                                </template>
                            </el-table-column>
                            <el-table-column
                                    prop="productName"
                                    label="名称"
                                    min-width="20%">
                            </el-table-column>
                            <el-table-column
                                    prop="buyCount"
                                    label="购买数量"
                                    min-width="20%">
                            </el-table-column>
                            <el-table-column
                                    prop="sumPrice"
                                    label="金额"
                                    min-width="20%">
                            </el-table-column>
                        </el-table>
                        <!--填写退款理由-->
                        <el-input
                                type="textarea"
                                :rows="5"
                                placeholder="填写退款理由"
                                v-model="refundReason"
                                maxlength="200"
                                show-word-limit
                                style="margin-top: 30px;">
                        </el-input>
                    </div>
                    <span slot="footer" class="dialog-footer">
                        <span>序号:{{refundData.orderId}}</span>
                        <el-button plain @click="refundDialog = false">取 消</el-button>
                        <el-button type="danger" plain @click.prevent="refundOrderItem(3)">确认退款</el-button>
                    </span>
                </el-dialog>


                <!-- dialog 评论会话框 一个页面只有一个会话框 -->
                <el-dialog
                        title="评论"
                        :visible.sync="reviewDialog"
                        width="50%">
                    <div style="border: 2px solid #458b74;border-radius: 30px 5px 5px 5px;">
                        <div class="storeBlock2" style="margin-bottom: 10px;">
                            <img class="storeImg" :src="reviewData.storeImg">
                            <div style="line-height: 60px;" v-text="reviewData.storeName"></div>
                        </div>
                        <div id="reviewMain" v-for="itemVo in reviewData.itemVoList">
                            <!--一个item-->
                            <div style="margin-top: 10px">
                            <el-row>
                                <el-col :span="4" :offset="1">
                                    <img :src="itemVo.productImg" style="height: 60px; width:60px;">
                                </el-col>

                                <el-col :span="4">
                                    <el-row :span="24">
                                        &nbsp;<span v-text="itemVo.productName"></span>
                                    </el-row>
                                    <el-row :span="24">
                                        <el-col :span="12">
                                            <span v-text="'￥'+itemVo.price"></span>
                                        </el-col>
                                        <el-col :span="12">
                                            <span>×</span><span v-text="itemVo.buyCount"></span>
                                        </el-col>
                                    </el-row>
                                </el-col>

                                <el-col :span="8">
                                    <el-row>
                                        &nbsp;小计:&nbsp;
                                    </el-row>
                                    <el-row>
                                        <span v-text="'￥'+itemVo.sumPrice" style="height:60px;box-sizing: border-box;font-size: 25px;"></span>
                                    </el-row>
                                </el-col>
                            </el-row>


                            <el-row>
                                <el-col :span="4" :offset="1">
                                    &nbsp;&nbsp;&nbsp;&nbsp;评分:
                                </el-col>
                                <el-col :span="8">
                                    <!--评分-->
                                    <el-rate
                                        v-model="itemVo.grade"
                                        show-text>
                                    </el-rate>
                                </el-col>
                            </el-row>
                            <el-row>
                                <el-col :span="24">
                                    <!--填写评论-->
                                    <el-input
                                        type="textarea"
                                        :rows="5"
                                        placeholder="填写评论"
                                        maxlength="200"
                                        show-word-limit
                                        v-model="itemVo.comment">
                                    </el-input>
                                </el-col>
                            </el-row>
                            </div>
                        </div>

                    </div>
                    <span slot="footer" class="dialog-footer">
                        <span>序号:{{reviewData.orderId}}</span>
                        <el-button plain @click="reviewDialog = false">取 消</el-button>
                        <el-button type="success" plain @click.prevent="reviewOrderItem()">提交评价</el-button>
                    </span>
                </el-dialog>



            </el-col>
        </el-row>
    </el-main>

    <el-footer v-if="orderList.length>0">
        <!-- 页码 -->
        <el-row>
            <el-col :span="20" :offset="2">
                <el-pagination
                        style="text-align: center;"
                        @size-change="handleSizeChange"
                        @current-change="handleCurrentChange"
                        hide-on-single-page
                        background
                        :current-page="currentPage"
                        :page-sizes="[3, 5, 10, 20]"
                        :page-size="pageSize"
                        prev-text="上一页"
                        next-text="下一页"
                        layout="total, sizes, prev, pager, next, jumper"
                        :total="total">
                </el-pagination>
            </el-col>
        </el-row>
    </el-footer>

</el-container>

<script>

    console.log(".........userOrder...........")

    new Vue({
        el: "#app"
        ,
        data: {
            orderList: [],  //数据
            currentPage: 1, //当前页
            pageSize: 3,    //每页条数
            total: 0,       //总条数
            totalPages: 0,  //总页数
            refundReason: "",
            refundDialog: false,
            refundData:{},
            reviews:"",
            reviewDialog:false,
            reviewData:{},
            reviewItems:[],
            rates:{},
            rateArr:[],
            rateValue:null,
            value:null,
        }
        ,
        methods: {
            handleSizeChange(pageSize) {
                //控制每页条数
                this.pageSize=pageSize;
            },
            handleCurrentChange(pageNum) {
                //控制页码
                // 小于1 或者 大于total 或者 仍获取当前页数据 直接返回
                if (pageNum < 1 || pageNum > this.totalPages || pageNum == this.currentPage) {
                    console.log(pageNum + " 无效页码值")
                    return;
                }
                this.currentPage = pageNum;
                this.initOrderList();
            },
            go(pageNum) {
                // 小于1 或者 大于total 或者 仍获取当前页数据 直接返回
                if (pageNum < 1 || pageNum > this.totalPages || pageNum == this.currentPage) {
                    console.log(pageNum + " 无效页码值")
                    return;
                }
                this.currentPage = pageNum;
                this.initOrderList();
            },
            initOrderList() {
                // 查询订单分页
                let _this = this;
                let params = {
                    currentPage: this.currentPage,
                    pageSize: this.pageSize,
                    keyword: this.keyword
                }
                $.get("/order/queryAllOrder", params, function (data) {
                    console.log(data)

                    _this.orderList = data.records;
                    _this.currentPage = data.current;
                    _this.pageSize = data.size;
                    // 数据总量
                    _this.total = data.total;
                    // 总页数
                    _this.totalPages = data.pages;
                })
            }
            ,
            updateOrderStatus(orderId, newStatus) {
                // 支付/取消订单
                // 1.弹框提示:是否取消订单
                if(newStatus==2){
                    if(!confirm("确认取消订单？")){
                        return
                    }
                }
                // 3.支付/取消订单
                let params = {
                    orderId: orderId,
                    newStatus: newStatus
                }
                let _this = this;
                $.post("/order/updateOrderStatus", params, function (data) {
                    if(data!="ok"){
                        alert(data)
                    }
                    // 无论是否修改状态都刷新页面数据
                    _this.initOrderList();
                })
            }
            ,
            receiving(orderId, storeId, newStatus) {
                // 签收
                if(!confirm("请确保收到餐品后再签收！")) return
                let params = {
                    orderId: orderId,
                    storeId: storeId,
                    newStatus: newStatus
                }
                let _this = this;
                $.post("/order/receivingOrderItem", params, function () {
                    // 状态修改完成后刷新页面数据
                    _this.initOrderList();
                })
            }
            ,
            clearRefundTextarea(orderItem,orderId) {
                // 清空退款理由textarea
                this.refundReason = "";
                this.refundDialog = true;
                orderItem["orderId"]=orderId;
                this.refundData=orderItem;
            }
            ,
            refundOrderItem(newStatus) {
                // 按商铺退款
                orderId = this.refundData.orderId
                storeId = this.refundData.storeId
                //确认退款
                // console.log("orderId: " + orderId + "storeId: " + storeId + " newStatus: " + newStatus)
                refundReason = this.refundReason
                // console.log("refundReason: " + refundReason)
                let params = {
                    orderId: orderId,
                    storeId: storeId,
                    newStatus: newStatus,
                    refundReason: refundReason,
                }
                let _this = this;
                $.post("/order/refundOrderItem", params, function (data) {
                    console.log(data)
                    if (data != "ok") {
                        // alert(data)
                        _this.$message.error(data)
                    } else {
                        // alert("退款成功！")
                        _this.refundDialog=false;
                        _this.initOrderList();
                    }
                })
            }
            ,

            clearReviewsTextarea(orderItem,orderId) {
                // 显示会话框
                this.reviewDialog = true;
                //添加orderId参数
                orderItem["orderId"]=orderId;
                //获取评论数据
                this.reviewData=orderItem;
                // console.log(this.reviewData)
                itemVoList = orderItem.itemVoList
                // 清除评论textarea
                let reviewItems=[]
                let itemVos = []
                for(let itemVo of itemVoList){
                    itemVo.grade = 0
                    itemVo.comment = ""
                    reviewItems.push(itemVo)
                    itemVos.push(itemVo)
                }
                this.reviewItems=reviewItems
                // 判断item状态: 点击评价判断一次,确认提交判断一次
                let _this = this;
                $.ajax({
                    url: "/order/checkOrderItem",
                    data: JSON.stringify(itemVos),
                    dataType: "text",
                    contentType: "application/json",
                    type: "POST",
                    success: function (data) {
                        console.log(data)
                        if(data!="ok"){     // 不成功
                            // alert(data)
                            _this.$message.warning(data);
                            // 已评价,关闭dialog
                            _this.reviewDialog=false;
                            _this.initOrderList();
                        }
                    }
                });

            }
            ,
            reviewOrderItem() {
                // 评论
                storeId = this.reviewData.storeId
                itemVoList = this.reviewData.itemVoList
                // 由于自动评价,点击按钮需要校验状态,防止后台已评价订单,而用户还未刷新页面
                let _this = this;
                let contentIsNull = false;// 有评论未填写
                let rateIsNull = false;// 有评分未填写
                let comments = [];  // 这里是用数组放多个comment对象
                for (let item of itemVoList) {
                    let comment = {};// 空comment对象,放属性
                    let content = item.comment.trim()
                    let rate = item.grade
                    if (content == "" || content == null) {
                        contentIsNull = true;
                    }
                    if (rate == 0 || rate == null) {
                        rateIsNull = true;
                    }
                    comment["id"] = 0;
                    comment["storeId"] = storeId;
                    comment["productId"] = item.productId;
                    comment["content"] = content;
                    comment["grade"] = item.grade;
                    comment["userId"] = 0;
                    comment["itemId"] = item.id;
                    comment["createTime"] = null;
                    comments.push(comment);
                }
                if (contentIsNull) {
                    if(!confirm("您有餐品尚未评价，是否继续提交？")) return
                }
                if (rateIsNull) {
                    if(!confirm("您有餐品尚未评分，系统将默认好评，是否继续提交？")) return
                }
                // 前端传多个对象转为后端List<T>
                $.ajax({
                    url: "/order/reviewOrderItem",
                    data: JSON.stringify(comments),
                    dataType: "text",
                    // 之前的报错:Resolved [org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'application/x-www-form-urlencoded;charset=UTF-8' not supported]
                    // 因为这样的报错,而用这个方法
                    contentType: "application/json",
                    type: "POST",
                    success: function (data) {
                        console.log(data)
                        if(data!="ok"){     // 不成功
                            // alert(data)
                            _this.$message.warning(data);
                        }
                        // 无论是否添加评论都刷新页面数据
                        _this.reviewDialog=false;
                        _this.initOrderList();
                    }
                });
            }
            ,
            toStoreMenu(storeId) {
                // 跳转商铺详情
                $(location).attr('href', '/store/toStoreMenu?storeId=' + storeId);
            }
        }
        ,
        created() {
            this.initOrderList();
        }
    });


</script>


</body>
</html>